<template>
  <vue-seamless-scroll :data="listData" class="warp" :class-option="classOption">
    <ul class="item">
      <li v-for="(item, index) in listData" :key="index">
        <span v-text="item"></span>
      </li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: 'autoScroll',
  components: {
    vueSeamlessScroll
  },
  computed: {
    classOption() {
      return {
        step: 0.2, //数值越大速度滚动越快
        limitMoveNum: 5, //开始无缝滚动的数据量  //this.fourDatata.length
        hoverStop: true, //是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, //开启数据实时监控刷新dom
        singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 //单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {
      themeData: [],
      listData: [],
    }
  },
  methods: {
    refreshData(index) {
      this.listData = this.themeData[index]
    }
  }
}
</script>

<style lang="scss" scoped>
.warp {
  height: 3rem;
  margin: 0 auto;
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    li {
      //display: block;
      height: 30px;
      //line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
      text-align: center;

      span {
        margin: auto;
        word-wrap: break-word;
        color: #b3ccf8;
        font-size: 13px
      }

    }


  }
}
</style>